<template>
    <div>
        
        <transition name="left_slide">
            <div class="left" v-show="$parent.showPage">
                <div class="card1">
                    <h2>监控统计概览</h2> 
                    <div class="view_group flex justify-between">
                        <div class="view_item flex justify-between" v-for="(item,index) in videoList" :key="index">
                            <div>
                                <p class="font_color">{{ item.text1 }}</p>
                                <p class="font_color">{{ item.text2 }}</p> 
                            </div>
                            <div class="num_cell">
                                <p  class="font_color">{{ item.num1 }}</p>
                                <p>{{ item.num2 }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="left_card2 card_bg_c"> 
                    <div class="card_title"><i></i>监控设备列表<i class="more_icon"></i></div>
                    <div class="left_card2_content">
                        <table border="0">
                            <thead>
                                <tr class="table_title">
                                    <th>序号</th> 
                                    <th>监控摄像头名称</th> 
                                    <th>大机设备名称</th> 
                                </tr>
                            </thead>
                            <tbody class="custom_tbody table_tbody">
                                <tr class="tr1" v-for="(data, i) in tableList" :key="i" @click="tableClick(data)">
                                    <td>{{ i+1> 9 ? i+1 : "0"+(i+1) }}</td> 
                                    <td>{{ data.monitoringCameraName }}</td> 
                                    <td>{{ data.bigMachineMonitoringName }}</td> 
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </transition>

        <transition name="right_slide">
            <div class="right" v-show="$parent.showPage"> 
                <div class="card_title right_card_title  "><i></i>监控画面<i class="more_icon"></i></div> 
                <div class="right_card_content">
                    <div v-for="(item,index) in rightList" :key="index" @click="tableClick(item)">  
                        <img :src="item.img" alt="">
                        <p>{{ item.monitoringCameraName }}</p>
                    </div>
                </div>
            </div>
        </transition>

        <div class="video_Dialog" v-if="showVideoDialog">
            <div class="video_Dialog_content">
                <div class="content">
                    <i class="el-icon-close" @click="closeVideoDialog"></i> 
                    <div class="video_container" id="video-container"></div>
                    
                    <img class="full_screen_icon" src="~@static/img/全屏.png" alt="" @click="fullScreenBtn()">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import  EZUIKit from 'ezuikit-js';
export default {
    data(){
        return{ 
            showVideoDialog: false,
            accessToken: null,
            expiryDate: null,
            videoList: [
                { text1: "总监", text2: "控数", data: "monitoringTotal", num1: "100", num2: "" },
                { text1: "码头", text2: "监控数", data: "portMonitoringTotal", num1: "60", num2: "" },
                { text1: "堆场", text2: "监控数", data: "stackYardMonitoringTotal", num1: "40", num2: "" }, 
                { text1: "大机", text2: "监控数", data: "bigMachineMonitoringTotal", num1: "20", num2: "" }, 
            ],
            tableList: [
                { num: "01", devName: "装船机A", devStatus: "在线" },
                { num: "02", devName: "装船机B", devStatus: "离线" },
                { num: "03", devName: "装船机C", devStatus: "故障" }, 
                { num: "04", devName: "装船机A", devStatus: "在线" },
                { num: "05", devName: "装船机B", devStatus: "离线" },
                { num: "06", devName: "装船机C", devStatus: "故障" }, 
                { num: "07", devName: "装船机A", devStatus: "在线" },
                { num: "08", devName: "装船机B", devStatus: "离线" },
                { num: "09", devName: "装船机C", devStatus: "故障" }, 
                { num: "10", devName: "装船机A", devStatus: "在线" },
                { num: "11", devName: "装船机B", devStatus: "离线" },
                { num: "12", devName: "装船机C", devStatus: "故障" }, 
                { num: "13", devName: "装船机C", devStatus: "故障" }, 
            ],
            rightList: [
                { 
                    "monitoringCameraName": "二期215皮带-装船泊位", 
                    "monitoringCameraUrl": "ezopen://open.ys7.com/AF5990165/23.live",
                    "img": require('@static/img/二期215皮带机装船泊位.png')
                },
                { 
                    "monitoringCameraName": "二期215皮带-卸船泊位1", 
                    "monitoringCameraUrl": "ezopen://open.ys7.com/AF5990165/25.live",
                    "img": require('@static/img/二期215皮带机卸船泊位1.png')
                },
                { 
                    "monitoringCameraName": "二期215皮带-卸船泊位3", 
                    "monitoringCameraUrl": "ezopen://open.ys7.com/AF5990165/27.live",
                    "img": require('@static/img/二期215皮带机卸船泊位3.png')
                },
                { 
                    "monitoringCameraName": "二期215皮带-卸船泊位4", 
                    "monitoringCameraUrl": "ezopen://open.ys7.com/AF5990165/28.live",
                    "img": require('@static/img/二期215皮带机卸船泊位4.png')
                }
            ],
            headers: {
                "sign": "d04153093d0f05fad6e4d5dc5c05487bd8f5039d6fe553482d601845345deda7",
                "x-access-token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3MjcxMzgzNTEsInVzZXJuYW1lIjoiYWRtaW4ifQ.zqpjhBwlBYYLzGC9wcmElKRHJGE4SaKWHC-vNqZhafg"
            },
            rightIdList: ["video-container0","video-container1","video-container2","video-container3"],
            playerFrom: {
                player0: null,
                player1: null,
                player2: null,
                player3: null,
                player6: null,
            },
        }
    },

    mounted() {
        this.monitoringStatistics();
        this.monitoringCamera(); 
        // this.initPlayer();  
        // this.$bus.$on("get-CameraDetail",(res)=>{
        //     this.getCameraDetail(res);
        // });
    },

    methods: {  
        // getCameraDetail(res){
        //     let _this = this;
        //     let cameraName = res.split(",")[1];
        //     if(_this.tableList.length > 0){
        //         _this.tableList.forEach( item => {
        //             if(item.monitoringCameraName === cameraName){
        //                 // _this.showVideoDialog = true;
        //                 // _this.$nextTick(() => { 
        //                 //     _this.playVideo("video-container",item.monitoringCameraUrl,"player6");
        //                 // }); 
        //                 _this.$parent.showVideoDialog = true;  
        //                 _this.$bus.$emit("play-Video",item.monitoringCameraUrl);
        //             }
        //         });
        //     }
        // },
        fullScreenBtn(){
            if(this.playerFrom["player6"]){
                this.playerFrom["player6"].fullScreen();
            }
        },
        tableClick(data){ 
            let _this = this;
            if(data.monitoringCameraUrl && data.monitoringCameraUrl !== ''){
                _this.$parent.showVideoDialog = true;  
                _this.$bus.$emit("play-Video",data.monitoringCameraUrl);
                // _this.$nextTick(() => { 
                //     this.playVideo("video-container",data.monitoringCameraUrl,"player6");
                // });  
            }else{
                this.$message.error("该监控摄像头未配置播放地址");
            }
            
        },
        closeVideoDialog(){
            this.playerFrom.player6.closeSound();
            this.playerFrom.player6.stop();
            this.showVideoDialog = false;
        },
        monitoringCamera(){
            let _this = this;
            let url = `${_this.$sysConfig.baseUrl}/digital/statistics/monitoring_camera`; 
            _this.$axios.get(url, {headers: _this.headers}).then(res=>{   
                let result = res.data.result;      
                _this.tableList = result;  
                console.log(_this.tableList);
                
            })
        },
        monitoringStatistics(){
            let _this = this;
            let url = `${_this.$sysConfig.baseUrl}/digital/statistics/monitoring_statistics`; 
            _this.$axios.get(url, {headers: _this.headers}).then(res=>{   
                let result = res.data.result;  
                _this.videoList.forEach( item => {
                    for(let key in result){
                        if(key === item.data){
                            item.num1 = result[key];
                        }
                    } 
                } );
            })
        },
        playVideo(id,url,player){
            let _this = this;     
            
            _this.playerFrom[player] = new EZUIKit.EZUIKitPlayer({ 
                id, // 视频容器ID
                accessToken: _this.accessToken,
                url,  
                width: 0.48 * window.innerWidth, 
                height: 0.6 * window.innerHeight, 
            });
            _this.playerFrom[player].play();
        },
  
        async initPlayer() {
            let _this = this;
            const token = this.getAccessToken();  
            
            if (!token) { 
                try {
                    const response = await this.fetchAccessToken();
                    let accessToken = response.data.data.accessToken;
                    let expiryDate = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000); // 7 days later
                    _this.saveAccessToken(accessToken, expiryDate);
                } catch (error) {
                    console.error('Failed to fetch access token:', error);
                    return;
                }
            }  
        },

        async fetchAccessToken() {
            const url = "https://open.ys7.com/api/lapp/token/get";
            const data = new FormData();
            data.append('appKey', '536ef90cccf643aaad8686a9bb7a7726');
            data.append('appSecret', '780464ffacc9eef363aa95d17c835be0');

            try {
                const response = await this.$axios.post(url, data); 
                
                return response;
            } catch (error) {
                if (error.response && error.response.status === 401 && error.response.data.code === '10002') {
                    // Token 过期，尝试重新获取
                    return this.fetchAccessToken();
                }
                throw error;
            }
        },

        getAccessToken() {
            let _this = this;
            const storedToken = localStorage.getItem('accessToken');
            const storedExpiry = localStorage.getItem('expiryDate');
            _this.accessToken = storedToken;
            _this.expiryDate = storedExpiry;
            const now = new Date();

            console.log(new Date(storedExpiry),storedToken,storedExpiry);
            

            if (storedToken && storedExpiry && new Date(storedExpiry) > now) {
                return storedToken;
            }
            return null;
        },

        saveAccessToken(token, expiry) {
            localStorage.setItem('accessToken', token);
            localStorage.setItem('expiryDate', expiry.toISOString());
            this.accessToken = token;
            this.expiryDate = expiry;
        },
    }, 
   
}
</script>



<style lang="scss" scoped>
@import "@/assets/styles/overView.scss"; 



/* 左侧内容从右到左动画 */
.left_slide-enter-active,
.left_slide-leave-active {
  transition: all 0.5s linear;
  transform: translateX(0);
}
.left_slide-enter,
.left_slide-leave {
  transform: translateX(-100%);
}
.left_slide-leave-to {
  transform: translateX(-100%);
}
/* 右侧内容从右到左动画 */
.right_slide-enter-active,
.right_slide-leave-active {
  transition: all 0.5s linear;
  transform: translateX(0);
}
.right_slide-enter,
.right_slide-leave {
  transform: translateX(100%);
}
.right_slide-leave-to {
  transform: translateX(100%);
}

.video_Dialog{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999; 
    // backdrop-filter: blur(5px);
    .video_Dialog_content{
        position: absolute;
        top: 50%;
        left: 51.2%;
        transform: translate(-50%,-50%); 
        // width: 48vw;
        // height: 70vh;
        background: url("~@static/img/dialog.png") no-repeat 0 0/100% 100%;
        .content{
            width: 100%;
            height: 100%; 
            position: relative;
            padding: 2vh 1vw 3vh;
            box-sizing: border-box;
            .el-icon-close{ 
                float: right;
                font-size: 1.2vw;
                color: #fff;
                font-weight: bold; 
                cursor: pointer;
                margin-bottom: 1vh;
            }
            .video_container{
                width: 100%;
                height: calc(100% - 3vh); 
            }
        }
        .full_screen_icon{
            position: absolute;
            bottom: 4vh;
            left: 1.4vw;
            width: 1.2vw;
            height: auto;
            cursor: pointer;
        }
        
    }
}

.card_bg_c{
    background: url("~@static/img/card_bg_c.png") no-repeat center center/100% 100% !important;
}

.card1{  
    box-sizing: content-box !important;
    h2{ 
        background: unset !important;
        font-size: 1.4vw;
    }
}

.view_group{ 
    flex-wrap: wrap; 
    >div{
        width: calc(50% - 0.6vw);
    }
    .view_item{
        >div:nth-child(1){
            width: 10.8vw; 
            height: 9vh;
            background: url("~@static/img/编组_20.png") no-repeat 0 0/100% 100%;
            padding-top: 1.4vh;
            box-sizing: border-box;
            p{
                font-size: 1vw;
                font-weight: bold;
                text-align: center;
            }
        }
        .num_cell{
            >p:nth-child(1){
                font-size: 2vw;
                font-weight: bold;
            }
            >p:nth-child(2){
                font-size: 0.82vw;
                color: #8DA9E9;
            }
        }
    }
}


.left_card2{
    width: auto !important;
    margin-top: 16px;
    height: calc(100vh  - 41vh);    
    padding-top: 16px;
    @media (max-width: 1920px) { 
        height: calc(100vh  - 43vh);    
    }
}
.left_card2_content{  
    width: 21.36vw;
    height: calc(100% - 7vh); 
    padding: 1.4vh 0.8vw;
    overflow-y: auto;
    @media (max-width: 1920px) { 
        height: calc(100% - 8vh);    
    }
}

// tbody{
//     >tr:hover{
//         background-color: rgba(34,41,55,0.25);
//     }
// }

thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
    text-align: center;
    margin-bottom: 0.4vh;
}
thead {  
    font-size: 0.8vw;
    th{
        font-weight: normal !important;
    }
}

table{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: none;
    // font-size: 0.5vw;
    color: #fff;
    tr{
        height: 3vh;
        background-color: rgba($color: #ffffff, $alpha: 0.19); 
    }
    .table_title{
        background-color: rgba($color: #ffffff, $alpha: 0.19);
        font-weight: 100;
        height: 4vh;
        >th:nth-child(1){
            width: 3vw;
            border-right: 1px solid #D9D9D944;
        }
    }
    .tr1{
        // background-color: #333C4C;
        cursor: pointer;
        font-size: 0.7vw;
        >td:nth-child(1){
            width: 3vw;
            border-right: 1px solid #D9D9D944;
        }
    }
    .tr2{
        cursor: pointer;
        // background-color: rgba(34,41,55,0.85);
        font-size: 0.7vw;
    }
}
.right{
    width: 21.36vw;
    height: calc(100% - 1.6vh);
    background: url("~@static/img/BGComp_c.png") no-repeat 0 0/100% 100%;
    >div{
        background: unset !important;
        width: 100%;
    }

    .right_card_title{
        margin: 1.4vh 0;
    }
    .right_card_content{
        height: calc(100% - 5.8vh);  
        padding: 0 1.6vh 0.8vw;
        box-sizing: border-box; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        >div{
            width: 100%;
            height: calc(25% - 1vh);
            background: url("~@static/img/监控_框.png") no-repeat 0 0/100% 100%;    
            padding: 0.6vh 0.3vw;
            box-sizing: border-box;
            .video-container,
            img{
                height: calc(100% - 3vh);
                width: 100%;
            }
            p{
                line-height: 2.4vh;
                text-align: center;
                font-size: 1vw;
                color: #CFDFFC;
            }
        }
    }
}
</style>